<template>
  <div class="container">
    <!-- 轮播图 -->
    <div class="img-container">
      <el-carousel height="500px" indicator-position="outside">
        <el-carousel-item v-for="(item, index) in images" :key="index">
          <img :src="baseUrl + item.image" class="carousel-image" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 商品展示 -->
    <div class="product-list-container">
      <div class="product-list">
        <div class="product-item" v-for="(item, index) in goodsList" :key="index">
          <img :src="baseUrl+item.coverImage" alt="商品封面" class="product-image">
          <div class="product-info">
            <p class="product-name">{{ item.goodsNmae }}</p>
            <p class="product-feature">{{ item.goodsFeature }}</p>
            <div class="price-group">
              <span class="current-price">{{ item.salePrice }}元起</span>
              <span v-if="item.originalPrice" class="original-price">
                {{ item.originalPrice }}元
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBaseUrl, sendRequest } from "@/util/request";

export default {
  name: "GoodsSlideshow",
  data() {
    return {
      baseUrl: getBaseUrl(),
      images: [],
      //只查显示
      goodsCarousel: { isOnline: 1 },
      goods: { goodsStatus: 1 },
      goodsList: []
    };
  },
  created() {
    this.selectCarousel()
    this.selectGoods()
  },
  methods: {
    selectCarousel() {
      sendRequest("post", `index/carousel/selectCarousel/${this.goodsCarousel.isOnline}`)
          .then((res) => {
            this.images = res.carouselList;
          });
    },
    selectGoods(){
      sendRequest("post",`index/goods/selectGoods/${this.goods.goodsStatus}`)
          .then((res)=>{
            console.log(res)
            this.goodsList = res.goodsList
          })
    }
  }
};
</script>

<style scoped>
/* 全局容器 */
.container {
  max-width: 1300px; /* 与轮播图宽度一致 */
  margin: 0 auto;
  padding: 0 20px;
}

/* 轮播图容器 */
.img-container {
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-image {
  height: 500px !important; /* 强制覆盖Element UI默认样式 */
  object-fit: cover;
  cursor: pointer;
}

/* 商品展示容器 */
.product-list-container {
  margin-top: 30px;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 自适应列数 */
  gap: 20px;
}

.product-item {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  min-height: 300px; /* 统一卡片高度 */
  cursor: pointer;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 15px;
  border-radius: 4px;
}

.product-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-feature {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  overflow: hidden;
}

.price-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.current-price {
  color: #ff4400;
  font-size: 16px;
  font-weight: 300;
}

.original-price {
  color: #999;
  font-size: 14px;
  text-decoration: line-through;
  margin-left: 10px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .product-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}
</style>
